import 'package:flutter/material.dart';
import 'package:flutter_shop_template/common.dart';
import 'package:flutter_shop_template/pages/home/banner.dart';
import 'package:flutter_shop_template/pages/home/tabview1.dart';
import 'package:flutter_shop_template/pages/home/tabview3.dart';

import 'tabview2.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final List<dynamic> tabbar = [
    {
      "title": '精选',
      "icon": Icons.h_mobiledata,
    },
    {
      "title": '进口',
      "icon": Icons.ice_skating,
    },
    {
      "title": '直播',
      "icon": Icons.format_align_justify,
    },
    {
      "title": '新品',
      "icon": Icons.kayaking,
    }
  ];
  final List<String> banner = [
    'https://cdn.xihaf.com/template/u%3D75827650%2C649616151%26fm%3D26%26fmt%3Dauto.webp',
    "https://cdn.xihaf.com/template/u%3D1091308503%2C3633988431%26fm%3D26%26fmt%3Dauto.webp",
    "https://cdn.xihaf.com/template/u%3D2124134884%2C2847257753%26fm%3D26%26fmt%3Dauto.webp"
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabbar.length,
      child: Theme(
        data: Theme.of(context).copyWith(),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: G.appbarSearch(
            context,
            IconButton(onPressed: () {}, icon: const Icon(Icons.crop_free)),
          ),
          body: SafeArea(
            child: NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverToBoxAdapter(
                    child: Column(
                      children: [
                        homeBanner(banner),
                        Padding(
                          padding: const EdgeInsets.all(20),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              classifyItem(context, "会员中心", Icons.ac_unit,
                                  Colors.red, '/'),
                              classifyItem(
                                  context,
                                  "种草特辑",
                                  Icons.baby_changing_station,
                                  Colors.green,
                                  '/classify-list/grass'),
                              classifyItem(context, "精选品牌", Icons.cabin,
                                  Colors.indigo, '/classify-list/brand'),
                              classifyItem(context, "领券中心", Icons.dark_mode,
                                  Colors.orange, ""),
                              classifyItem(context, "领券中心", Icons.e_mobiledata,
                                  Colors.blue, ""),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 20),
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 20, horizontal: 10),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  children: [
                                    Text(
                                      "限时抢购",
                                      style:
                                          Theme.of(context).textTheme.headline2,
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(left: 20),
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 4, horizontal: 10),
                                      decoration: BoxDecoration(
                                        color: Colors.red,
                                        borderRadius: BorderRadius.circular(20),
                                      ),
                                      child: const Text(
                                        '03:08:58',
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    )
                                  ],
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 4),
                                  child: Text(
                                    "每天10点 限量秒杀",
                                    style:
                                        Theme.of(context).textTheme.subtitle2,
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 20),
                                  padding: const EdgeInsets.only(bottom: 20),
                                  decoration: const BoxDecoration(
                                    border: Border(
                                      bottom: BorderSide(
                                          width: 1, color: Colors.black12),
                                    ),
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [1, 2, 3, 4]
                                        .map(
                                          (e) => Column(
                                            children: [
                                              SizedBox(
                                                width: 70,
                                                height: 70,
                                                child: Image.network(
                                                  "https://cdn.xihaf.com/template/col${10 + e * 2}.jpg",
                                                  fit: BoxFit.fill,
                                                ),
                                              ),
                                              Container(
                                                margin: const EdgeInsets.only(
                                                    top: 4),
                                                child: const Text(
                                                  '￥69.0',
                                                  style: TextStyle(
                                                    color: Colors.red,
                                                    fontWeight: FontWeight.bold,
                                                  ),
                                                ),
                                              ),
                                              const Text(
                                                '￥99.0',
                                                style: TextStyle(
                                                  decoration: TextDecoration
                                                      .lineThrough,
                                                  color: Colors.black38,
                                                  fontWeight: FontWeight.bold,
                                                ),
                                              ),
                                            ],
                                          ),
                                        )
                                        .toList(),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 20),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "每日特价",
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .headline3,
                                            ),
                                            Text(
                                              "9块9疯抢",
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .subtitle2,
                                            )
                                          ],
                                        ),
                                      ),
                                      Expanded(
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "新人特惠",
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .headline3,
                                            ),
                                            Text(
                                              "特惠好物1元起",
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .subtitle2,
                                            )
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 20),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [1, 2, 3, 4]
                                        .map(
                                          (e) => SizedBox(
                                            width: 70,
                                            height: 70,
                                            child: Image.network(
                                              "https://cdn.xihaf.com/template/a$e.jpg",
                                              fit: BoxFit.fill,
                                            ),
                                          ),
                                        )
                                        .toList(),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.symmetric(vertical: 20),
                          padding: const EdgeInsets.symmetric(horizontal: 20),
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 20),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Column(
                              children: [
                                Row(
                                  children: [
                                    Text(
                                      "热门榜单",
                                      style:
                                          Theme.of(context).textTheme.headline2,
                                    ),
                                  ],
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 20),
                                  child: Row(
                                    children: [
                                      hotItem(
                                        context,
                                        "销量榜",
                                        Icons.ac_unit_rounded,
                                        Colors.purple.shade50,
                                      ),
                                      hotItem(
                                          context,
                                          "口碑榜",
                                          Icons.backpack_outlined,
                                          Colors.pink.shade50),
                                      hotItem(context, "热搜榜", Icons.search,
                                          Colors.orange.shade50),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SliverAppBar(
                    pinned: true,
                    leading: Container(),
                    leadingWidth: 0,
                    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
                    title: TabBar(
                      indicator: BoxDecoration(
                        color: Colors.indigo,
                        borderRadius: BorderRadius.circular(50),
                      ),
                      labelColor: Colors.white,
                      unselectedLabelColor: Colors.indigo.shade400,
                      tabs: tabbar
                          .map((e) => Tab(
                                height: 44,
                                text: e['title'],
                                iconMargin:
                                    const EdgeInsets.symmetric(vertical: 2),
                                icon: Icon(
                                  e['icon'],
                                  size: 16,
                                ),
                              ))
                          .toList(),
                    ),
                  ),
                ];
              },
              body: Container(
                margin: const EdgeInsets.only(top: 10),
                child: const TabBarView(
                  children: [
                    HomeTabView1(),
                    HomeTabView2(),
                    HomeTabView3(),
                    HomeTabView1(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget classifyItem(
    BuildContext context,
    String title,
    IconData icon,
    Color color,
    String url,
  ) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, url);
      },
      child: Column(
        children: [
          Container(
            margin: const EdgeInsets.only(bottom: 5),
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Icon(
              icon,
              color: Theme.of(context).selectedRowColor,
            ),
          ),
          Text(title)
        ],
      ),
    );
  }

  Expanded hotItem(
      BuildContext context, String title, IconData icon, Color color) {
    return Expanded(
      child: Container(
        height: 125,
        margin: const EdgeInsets.symmetric(horizontal: 4),
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: color,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: Theme.of(context).textTheme.headline4,
            ),
            Icon(
              icon,
              size: 70,
            )
          ],
        ),
      ),
    );
  }
}
